﻿<div class="contacts">
    <img alt="Go back to main menu" src="../images/back.png" onclick="location.href='#/main.html';" />
    <img class="add-contact-button" alt="Create new task" src="../images/add_blue.png" onclick="location.href='#/addcontact.html';" />
    <img class="remove-contact-button" alt="Remove tasks" src="../images/remove_blue.png" onclick="deleteContactFromDatabase();" />
    

    <div id="contacts-legend">
        List of all Contacts
    </div>

    <div id="contacts-container" data-bind="template: 'contacts-list'">
    </div>

    <script id="contacts-list" class="ui-widget-content" type="text/x-jquery-tmpl">
        <div id='${getNextId()}' class="contact-wrapper">
            <span>First name: ${firstName}</span>
            <span>Middle name: ${middleName}</span>
            <span>Last name: ${lastName}</span>
            <span>Phone number: ${phoneNumber}</span>
            <span>Email: ${email}</span>
            <span>Address: ${address}</span>
            <span>Website: ${website}</span>
            <span>Birthdate: ${birthdate}</span>
            <span>Occupation: ${occupation}</span>
            <span>Blood group: ${bloodGroup}</span>
        </div>
    </script>
    
    <script>
        var id = 0;
        function getNextId() {
            return id++;
        }
    </script>

    <script>
        $('#contacts-list').tmpl(contacts).appendTo('#contacts-container');
        $('#contacts-container').selectable();
    </script>

</div>
